<!DOCTYPE HTML>
<!--
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Donald S. Leung - Contact</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
		<style>
		.validationError { color: red }
		</style>
	</head>
	<body class="is-preload">

		<!-- Header -->
			<header id="header">
				<a href="/" class="title">Donald S. Leung</a>
				<nav th:include="fragments :: menu"></nav>
			</header>

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Main -->
					<section id="main" class="wrapper">
						<div class="inner">
							<h1 class="major">Contact</h1>
							<p>I currently have three email accounts in use: a personal email account, an academic one and a professional one.</p>
							<p>If you would like to contact me by email, please fill in and submit the form directly below, or scroll to the bottom of this page and click on one of the three icons corresponding to my private, academic and professional emails respectively. Whatever suits you best ;-)</p>
							<p><em>Note: due to corporate firewall policies, I may not be able to receive your email from my professional email account. If you would like to send me professional email, please first reach me through my personal email requesting access, with suitable justification. Then, after careful consideration and possibly discussion among colleagues, I may whitelist your specific email address on a case-by-case basis and notify you, in which case you may send subsequent emails to my professional inbox.</em></p>
							<form method="post" th:action="@{/contact}" th:object="${contact}">
								<div class="row gtr-uniform">
									<div class="col-6 col-12-xsmall">
										<input type="text" th:field="*{name}" placeholder="Name" />
									</div>
									<div class="col-6 col-12-xsmall">
										<input type="email" th:field="*{email}" placeholder="Email" />
									</div>
									<div class="col-12">
										<select th:field="*{category}">
											<option th:value="${null}">- Category -</option>
											<option th:value="${personal}">Personal</option>
											<option th:value="${academic}">Academic</option>
											<option th:value="${professional}">Professional</option>
										</select>
									</div>
									<div class="col-12">
										<textarea th:field="*{message}" placeholder="Enter your message" rows="6"></textarea>
									</div>
									<div class="col-12">
										<ul class="actions">
											<li><input type="submit" value="Send Message" class="primary" /></li>
											<li><input type="reset" value="Reset" /></li>
										</ul>
									</div>
									<div class="col-12">
										<ul class="validationError">
											<li th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</li>
											<li th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Email Error</li>
											<li th:if="${#fields.hasErrors('category')}" th:errors="*{category}">Category Error</li>
											<li th:if="${#fields.hasErrors('message')}" th:errors="*{message}">Message Error</li>
										</ul>
									</div>
								</div>
							</form>
							<ul class="icons">
							  <li><a href="mailto:donaldsebleung@gmail.com" class="icon brands fa-google fa-lg"><span class="label">Gmail</span></a></li>
							  <li><a href="mailto:donaldseb.leung@alumni.ust.hk" class="fa fa-graduation-cap fa-lg"><span class="label">Microsoft Outlook (HKUST)</span></a></li>
							  <li><a href="mailto:donaldleung@cre.com.hk" class="fa fa-briefcase fa-lg"><span class="label">Microsoft Outlook (CR Enterprise)</span></a></li>
							</ul>
						</div>
					</section>

			</div>

		<!-- Footer -->
			<footer id="footer" class="wrapper alt">
				<div class="inner">
					<ul class="menu" th:include="fragments :: copyright"></ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>
